<template>
    <div>
        <a-collapse :bordered="false">
            <template #expandIcon="props">
                <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
            </template>
            <a-collapse-panel key="1" :header="i18n('toolbar','工具栏组件')">
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="i18n('restoreBtn','还原按钮')">
                            <a-switch size="small" v-model:checked="config.styles.toolbarConfig.restoreBtn"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="i18n('downloadBtn','下载按钮')">
                            <a-switch size="small" v-model:checked="config.styles.toolbarConfig.downloadBtn"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12">
                        <a-form-item :label="i18n('dataView','数据视图')">
                            <a-switch size="small" v-model:checked="config.styles.toolbarConfig.dataView"/>
                        </a-form-item>

                    </a-col>
                    <a-col :span="12" v-if="screenData(config.chartType)">
                        <a-form-item :label="i18n('dataScaling','数据区缩放')">
                            <a-switch size="small" v-model:checked="config.styles.toolbarConfig.dataScaling"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-col :span="12" v-if="screenData(config.chartType)">
                        <a-form-item :label="i18n('switchBtn','折柱切换')">
                            <a-switch size="small" v-model:checked="config.styles.toolbarConfig.switchBtn"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" style="margin: 0px">
                    <a-form-item :label="i18n('fromRight','离容器右侧的距离')">
                        <a-input style="width: 100%" type="number" v-model:value="config.styles.toolbarConfig.fromRight">
                            <template #addonAfter>
                                <a-select v-model:value="config.styles.toolbarConfig.suffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
                        </a-input>
                    </a-form-item>
                </a-row>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>
<script>
/**
 * 工具栏组件
 */
export default {
    name: "toolbar-config",
    inject: {
        config: {
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            toolbarConfig: {
                restoreBtn: false,
                downloadBtn: false,
                dataView: false,
                dataScaling: false,
                switchBtn: false,
                fromRight: 50,
                suffix: "px"
            }
        }
    },
    created() {
        if (!this.config.styles.toolbarConfig) {
            this.config.styles["toolbarConfig"] = this.toolbarConfig;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "chartLang.toolbarConfig", key);
        },
        screenData(type) {
            let list = ['generalBar', 'horizontalBar', 'stackedBar', 'lineChart', 'areaChart', 'stackedArea', 'lineBar'];
            if (list.includes(type)) {
                return true
            } else {
                return false
            }
        }
    },
    watch: {}
}
</script>

<style scoped>
</style>
